<template>
    <div class='dialog'>
        <div class='newAdd dialog-con orderInfomationList'>
            <p>订单详情</p>
            <div class="orderDetail" >
                <el-form ref="form" :model="form" label-width="110px" inline>
                    <el-form-item label="订单类型">
                        <el-input  :value="shopinfo.purOrderType | purOrderType" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="订单金额">
                        <el-input  v-model="shopinfo.price" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="预计到货日期">
                        <el-input  :value="shopinfo.predictTime | predictTime" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="实际到货日期">
                        <el-input  :value="shopinfo.realityTime | predictTime" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="采购公司">
                        <el-input  v-model="shopinfo.companyName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="采购公司">
                        <el-input  v-model="shopinfo.supplyName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="收货仓库">
                        <el-input  v-model="shopinfo.depotName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="单据(合同)编号">
                        <el-input  v-model="shopinfo.purBillsId" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table">
               <el-table
                :data="shopDetail"
                style="width: 100%"
                border 
                :header-cell-style="getRowClass">
                <el-table-column
                prop="productName"
                label="商品名"
                width="150"
                align="center">
                </el-table-column>
                <!-- <el-table-column
                prop="productSize"
                label="规格"
                align="center">
                </el-table-column> -->
                <el-table-column
                prop="productWeight"
                label="重量"
                width="60"
                align="center">
                </el-table-column>
                <el-table-column
                prop="purchasePrice"
                label="进货价(含税含运)"
                align="center"
                width="140">
                </el-table-column>
                <el-table-column
                prop="productPrice"
                label="采购单价"
                width="90"
                align="center">
                </el-table-column>
                <el-table-column
                prop="purNumber"
                label="采购数量"
                align="center">
                </el-table-column>
                <el-table-column
                prop="money"
                label="金额"
                align="center">
                </el-table-column>
                <el-table-column
                prop="elsePrice"
                label="其他费用"
                align="center">
                </el-table-column>
                <el-table-column
                label="总金额"
                align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.money + scope.row.elsePrice}}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="memo"
                label="备注"
                width="100"
                align="center">
                </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-timeline>
                    <el-timeline-item
                    v-for="(activity, index) in activities2"
                    :key="index"
                    :color="activity.color">
                    {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="confirm">
                <el-button @click="cancel" type="success" plain>取 消</el-button>
                <el-button type="success" plain @click="buyAudit" v-if="show">通过</el-button>
                <el-button  @click="reject" type="success" plain v-if="backShow">驳回</el-button>
                <el-button type="success" @click="submitForm('form')" plain >生成</el-button>
                <el-button  @click="btnConfirm" v-if="conShow" type="success" plain>确认</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
// import { G_Public} from 'store/common/type'
import { mapGetters} from 'vuex'
// import { A_Public } from 'store/common/type.js'
import axios from 'axios'
import Qs from 'qs'
import {localStorage} from 'js/localStorage'
export default {
    inject:['reload'],
    data(){
        return {
            purOrderType:'',
            predictTime:'',
            companyId:'',
            productId:'',
            depotId:'',
            realityTime:'',
            supplyName:'',
            purBillsDate:'',
            purBillsId:'',
            //for..in遍历
            productName:'',
            purNumber:'',
            money:'',
            productPrice:'',
            memo:'',
            form:{
                purOrderType:'',
                predictTime:'',
                companyId:'',
                productId:'',
                depotId:'',
                realityTime:'',
                supplyName:'',
                purBillsDate:'',
                purBillsId:'',
            },
            userId:'',
            id:'',
            purtype:'',
            //判断审核按钮是否显示
            show:true,
            backShow:true,
            conShow:false,
            activities2: [
                {
                    content: '采购提交申请,需运营主管审批',
                    size: 'large',
                    id:'1'
                },
                {
                    content: '运营主管审批',
                    size: 'large',
                    id:'2'
                }, {
                    content: 'boss审批',
                    size: 'large',
                    id:'3'
                },
                {
                    content: '确认收货',
                    size: 'large',
                    id:'6'
                }
            ]
        }
    },
    props:{
        shopDetail:{
            type:Array,
            default:[]
        },
        shopinfo:{
            type:Object,
            default:{}
        }
    },
    filters:{
        purOrderType(val){
            return val==1 ? "常规订单" :'合同订单'
        },
        predictTime(val){
            if(val){
                return val.slice(0,10)
            }else{
                return 0
            }
        }
    },
    created(){
        //获取userId
        this.userId = localStorage.get("userID")
        //确认收货显示的按钮
        if(this.shopinfo.purBillsType=="3" ){
            this.show=false;
            this.backShow=false
            this.conShow=true
        }
        if(this.shopinfo.purBillsType=="6" ){
            this.show=false;
            this.backShow=false
        }
        if(this.shopinfo.purBillsType=="5"){
            this.show=false;
            this.backShow=false
        }
        if(this.shopinfo.purBillsType=="4"){
            this.show=false;
            this.backShow=false
        }
        var replaceObj={
            content: '运营主管审批通过',
            size: 'large',
            id:'2'
        }
        if(this.shopinfo.purBillsType =="2"){
           for(var i  in this.activities2){
                if(this.activities2[i].id == this.shopinfo.purBillsType){
                    this.activities2[i] = replaceObj
                }
           }
        }
        var rejectObj={
            content: '运营主管审批驳回',
            size: 'large',
            id:'2'
        }
        if(this.shopinfo.purBillsType=="4"){
            for(var i  in this.activities2){
                if(this.activities2[i].id == "2" && this.shopinfo.purBillsType == "4"){
                    this.activities2[i] = rejectObj
                }
            } 
        }
        var bossPass={
            content: 'boss审批通过',
            size: 'large',
            id:'3'
        }
        if(this.shopinfo.purBillsType == "3"){
            for(var i  in this.activities2){
                if(this.activities2[i].id == "3" && this.shopinfo.purBillsType == "3"){
                    this.activities2[i]=bossPass
                }
                if(this.activities2[i].id=="2" && this.shopinfo.purBillsType == "3" ){
                    this.activities2[i]=replaceObj
                }
            } 
        }
        var bossFail={
            content: 'boss审批驳回',
            size: 'large',
            id:'3'
        }
        //终审驳回 运营主管审批通过,boss审批驳回
        if(this.shopinfo.purBillsType=="5"){
            for(var i  in this.activities2){
                if(this.activities2[i].id == "3" && this.shopinfo.purBillsType == "5"){
                    this.activities2[i] = bossFail
                }
                if(this.activities2[i].id == "2" && this.shopinfo.purBillsType == "5"){
                    this.activities2[i] = replaceObj
                }
            } 
        }
        //确认收货 运营主管审批通过,boss审批通过
        if(this.shopinfo.purBillsType=="6"){
            for(var i in this.activities2){
                if(this.activities2[i].id=="2"){
                    this.activities2[i] = replaceObj 
                }
                if(this.activities2[i].id== "3"){
                    this.activities2[i] = bossPass 
                }
            }
        }
      
        //设置进度条的颜色
        var key = "color"
        var value = "#67C23A"
        for(var i in this.activities2){
            this.id=this.activities2[i].id
            this.purtype=this.activities2[i]
            if(this.id == "2" &&  this.shopinfo.purBillsType == "4" ){
                let  key="color"
                let value="#DC143C"
                return this.purtype[key]=value
            }
            if(this.id=="3" && this.shopinfo.purBillsType=="5"){
                let  key="color"
                let value="#DC143C"
                return this.purtype[key]=value
            }
            if(this.id <= this.shopinfo.purBillsType){
                this.purtype[key]=value
            }
        }
    },
    methods:{
        cancel(){
            this.$emit('closeDialog')
        },
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.generate()
                } else {
                    return false;
                }
            });
        },
        //确定
        btnConfirm(){
            this.$confirm('确认采购商品是否已到货, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let parmas={
                    purBillsId:this.shopinfo.purBillsId,
                    userId:this.userId,
                    id:this.shopinfo.id,
                    depotId:this.shopinfo.depotId
                }
                let success= data=>{
                    if(data.code=="OK"){
                        this.$message.success(data.msg)
                        this.reload()
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                api.purConfirm(parmas,success)
            }).catch(()=>{

            })   
        },
        //驳回申请
        reject(){
            this.$confirm('是否驳回采购申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                let parmas={
                    purBillsId:this.shopinfo.purBillsId,
                    userId:this.userId,
                    id:this.shopinfo.id
                }
                let success=data=>{
                        if(data.code=="OK"){
                            this.$message.success(data.data)
                            this.reload()
                        }else{
                            this.$message.error(data.msg)
                        }
                    }
                    api.purReject(parmas,success)
                }).catch(() => {
                        
            });
        },
        //生成word合同
        generate(){
            var arr=[]
            for(var i in this.shopDetail){
                var obj={
                    productName:'',
                    purNumber:'',
                    productPrice:'',
                    money:'',
                    memo:'',
                    productUnit:''
                }
                obj.productName=this.shopDetail[i].productName,
                obj.purNumber=this.shopDetail[i].purNumber,
                obj.money=this.shopDetail[i].money,
                obj.memo=this.shopDetail[i].memo,
                obj.productPrice=this.shopDetail[i].productPrice
                obj.productUnit=this.shopDetail[i].productUnit
                arr.push(obj)
            }
            axios({
                method:'post', 
                url: '/api/erp/v1/contract/create',
                data: {
                    purBillsId:this.shopinfo.purBillsId,
                    companyName:this.shopinfo.companyName,
                    supplyName:this.shopinfo.supplyName,
                    supplyAddress:this.shopinfo.supplyAddress,
                    supplyContact:this.shopinfo.supplyContact,
                    depotAddress:this.shopinfo.depotId,
                    supplyAccount:this.shopinfo.supplyAccount,
                    supplyAccountName:this.shopinfo.supplyAccountName,
                    items:arr 
                },
                responseType: 'arraybuffer'
            }).then(res => {
                let _data = res.data
                let url = window.URL.createObjectURL(new Blob([_data],{type: 'application/msword'})) 
                let link = document.createElement('a') 
                link.style.display = 'none' 
                link.href = url 
                let fileName=this.shopinfo.purBillsId
                link.setAttribute('download', fileName+'.docx') 
                document.body.appendChild(link) 
                link.click()
            });
            setTimeout(()=>{
                this.$emit('closeDialog') 
            },1000)
        },
        //设置表格第一行的颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#41e2ef;color:#fff'
            } else {
                return ''
            }
        },
        buyAudit(){
            this.$confirm('是否审核通过?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                let parmas={
                    purBillsId:this.shopinfo.purBillsId,
                    userId:this.userId,
                    id:this.shopinfo.id
                }
                let success=data=>{
                    if(data.code=="OK"){
                        this.$message.success(data.data)
                        this.reload()
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                api.purAudit(parmas,success)
                }).catch(() => {
                        
            });
        }
    }
}
</script>
<style scoped>
 .orderDetail .el-table--scrollable-x .el-table__body-wrapper{
    overflow-x: hidden
}
.el-timeline{
    float:left;
    margin-left:100px;
}
</style>

<style lang="scss" scoped>
.orderInfomationList{
    width:1000px;
    height:600px;
    overflow-y: auto;
    p{
        font-weight:700;
        line-height:50px;
        text-indent:30px;
    }
    .orderDetail{
        display: flex;
        input{
            width:220px;
        }
        .type{
            flex:1;
            margin-left:20px;
            span{
                width:120px;
                display: inline-block;
            }
            label{
                width:120px;
                display: inline-block; 
            }
            input{
                height:35px;
            }
        }
    }
    .confirm{
        text-align: right;
        margin-right:20px;
        padding: 100px 20px;
    }
    .table{
        margin:0 8px;
        width:98%;
        margin-bottom:20px;
        overflow: auto;
    }
}
</style>
